<template>
    <div id="tmpl">
        <!--1.0 商品轮播图--> 
        <!-- <slider :imgs="imgs"></slider> -->
        <div class="slider">
            <mt-swipe :auto="2000">
                <mt-swipe-item v-for="item in imgs">
                    <img :src="item.src">
                </mt-swipe-item>    
            </mt-swipe>
        </div>

        <!--2.0 实现商品购买区-->
        <div id="buy">
            <h4 v-text="info.title"></h4>
            <p class="line"></p>
            <ul>
                <li class="price">
                    市场价：<s>￥{{ info.market_price }}</s>
                    销售价：<span>￥{{ info.sell_price }}</span>
                </li>
                <li>
                    购买数量：
                </li>
                <li>
                    <mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button type="danger" size="small">加入购物车</mt-button>
                </li>
            </ul>
        </div>

        <div id="params">
            <h4>商品参数</h4>
            <p class="line"></p>
            <ul>
                <li>商品货号：{{ info.goods_no }}</li>
                <li>库存情况：{{ info.stock_quantity }}</li>
                <li>上架时间：{{ info.add_time | datefmt('YYYY-MM-DD HH:mm:ss') }}</li>
            </ul>
        </div>

        <!--3.0 图文详情-->
        <!--4.0 商品评论-->
        <div id="other">
            <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
                <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
            </router-link>
			<router-link v-bind="{to:'/goods/goodscomment/'+id}">
                <mt-button type="danger" size="large">商品评论</mt-button>
            </router-link>
        </div>
    </div>
</template>

<script>
    /* import slider from '../subcom/slider.vue'; */
    import common from '../../kits/common.js';
    import { Toast } from 'mint-ui';

    export default {
        /* components: {
            slider
        }, */
        data(){
            return {
                id: 0,  //表示商品id
                imgs: [],
                info: {}
            }
        },
        created(){
            // 获取url传入的商品id值
            this.id = this.$route.params.id;
            this.getimgs();
            this.getinfo();
        },
        methods: {
            getimgs(){
                var url  = common.apidomain + '/api/getthumimages/'+ this.id;
                
                this.$http.get(url).then(function(response){
					if(response.body.status != 0){
                        Toast(response.body.message);
                        return;
                    }
				    this.imgs = response.body.message;
				});
            },
            // 获取商品详情页参数区和价格，标题等数据
            getinfo(){
                var url = common.apidomain + '/api/goods/getinfo/' + this.id;

                this.$http.get(url).then(function(response){
                    this.info = response.body.message[0];
                });
            }
        }
    }
</script>

<style scoped>
    .mint-swipe {
        height: 300px;
    }

    .mint-swipe-item {
        width: 100%;
        height: 300px;
    }

    .mint-swipe-item img {
        width: 300px;
        
    }

    .slider{
        border:1px solid rgba(0,0,0,0.4);
        border-radius: 5px;
        margin: 5px;
    }

    #buy, #params, #other {
        margin: 5px;
        padding: 5px;
        border: 1px solid rgba(0,0,0,0.4);
    }

    #buy .line {
        height: 1px;
        border: 1px solid rgba(0,0,0,0.2);
    }

    #buy li, #params li {
        list-style: none;
        padding: 8px;
    }

    #buy ul, #params ul {
        padding-left: 0px;
    }

    #buy h4{
        color:#0094ff;
        padding: 5px;
    }

    #buy .price span{
		color:red;
        font-size: 25px;
	}

    #buy .price s {
        padding-right: 20px;
        color: rgba(0,0,0,0.6);
    }

    #other .imgdesc {
        margin-bottom: 20px;
    }
</style>


